<template>
	<base-switch-tabs
		:modelValue="modelValue"
		@update:modelValue="handleChangeTab"
		:data="tabList"
		translation
		activeTextBold />
</template>

<script lang="ts" setup>
import { BaseSwitchTabs, SwitchTabsType } from '@/components/base/'
import { UpSwitchTabsEnum } from './types'
import { PropType } from 'vue'

defineProps({
	modelValue: {
		type: String as PropType<UpSwitchTabsEnum>,
		required: true
	}
})

const emits = defineEmits(['update:modelValue'])

const tabList: SwitchTabsType = [
	{
		id: UpSwitchTabsEnum.sports,
		name: 'app.sports',
		icon: 'football'
	},
	{
		id: UpSwitchTabsEnum.slots,
		name: 'app.slots',
		icon: 'slots2'
	},
	{
		id: UpSwitchTabsEnum.casino,
		name: 'app.casino',
		icon: 'game2'
	}
]

const handleChangeTab = (val: string) => {
	emits('update:modelValue', val)
}
</script>
